<script setup lang="ts">
import {ref,reactive} from "vue";
import container from "../../components/container.vue";
const layout = ref('horizontal')
const form = reactive({
  name: '',
  post: '',
  isRead: false,
})
// console.log(container)
</script>

<template>
  <container :displayNavigation="true">
    <a-typography>
      <a-typography-title :heading="5">
        查询表格
      </a-typography-title>
    </a-typography>
    <a-space direction="vertical" size="large" :style="{width: '100%',background:'yellowgreen'}">
      <a-radio-group v-model="layout" type="button">
        <a-radio value="horizontal">horizontal</a-radio>
        <a-radio value="vertical">vertical</a-radio>
        <a-radio value="inline">inline</a-radio>
      </a-radio-group>
      <a-form :model="form" :layout="layout">
        <a-form-item field="name" label="Username">
          <a-input v-model="form.name" placeholder="please enter your username..." />
        </a-form-item>
        <a-form-item field="post" label="Post">
          <a-input v-model="form.post" placeholder="please enter your post..." />
        </a-form-item>
        <a-form-item field="isRead">
          <a-checkbox v-model="form.isRead">
            I have read the manual
          </a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button>Submit</a-button>
        </a-form-item>
      </a-form>
      <div>
        {{ form }}
      </div>
    </a-space>
  </container>

</template>

<style scoped lang="scss">
.search{
  width: 100%;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  overflow-y: auto;
  box-sizing: border-box;
  .breadcrumbNavigation{
    padding: 20px 0  20px 0;
  }
  .cont{
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    border-radius: 6px;
    box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
    padding-top: 8px;
    padding-left: 16px;
    padding-right: 16px;
  }
}


</style>